// 验证当前用户
checkLogin()
// 页面数据渲染
renderUserName()
// 获取学员数据
getDate()


registerLogout()



// 2.获取石板所有数据
async function getDate() {
  const token = localStorage.getItem("token")
  // 获取数据
  const res = await axios({
    url: "/dashboard",
    // 携带该参数发送给后端，
    headers: {
      Authorization: token
    }
  })

  renderOverview(res.data.overview)

  console.log(res.data);

  renderLine(res.data.year)
  renderPie(res.data.salaryData)
  renderBar(res.data.groupData)
  renderPies(res.data.salaryData)
  rendermap(res.data.provinceData)

}
// 3更新预览卡片
function renderOverview(data) {
  // data就是要渲染的函数
  console.log(data)
  for (let k in data) {
    if (k === "age") {
      document.querySelector(`.${k}`).innerHTML = data[k].toFixed(2)
    }
    else {
      document.querySelector(`.${k}`).innerHTML = data[k]
    }
  }



}
// 渲染折线图
function renderLine(data) {
  const line = document.querySelector("#line")
  const myChart = echarts.init(line)
  const option = {
    title: {
      text: '2022年全学科薪资走势',
      // left: 'left', // 标题位置在左上角
      top: 10,
      left: 15,
      textStyle: {
        fontSize: 16,
        fontWeight: 'bold'
      }
    },
    grid: {
      top: 60,
      left: 70,
      right: 40,
      bottom: 40
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: data.map(item => item.month)
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        data: data.map(item => item.salary),
        type: 'line',
        smooth: true, // 将折线变为曲线
        lineStyle: {
          width: 6 // 线条宽度
        },
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 4, // 节点边框加宽
        },
        symbolSize: 10, // 节点大小
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(54, 162, 235, 0.8)' }, // 开始颜色
            { offset: 1, color: 'rgba(255, 255, 255, 0.3)' } // 结束颜色
          ])
        }
      }
    ]
  };
  myChart.setOption(option)
}
// 渲染饼状图
function renderPie(data) {
  const salary = document.querySelector("#salary")
  const myChart = echarts.init(salary)
  const option = {
    // 标题配置
    title: {
      text: '班级薪资分布', // 标题文本
      left: 'center',        // 标题水平居中
      top: 'top'             // 标题位于顶部
    },

    // 提示框配置，当鼠标悬停在某个扇区时显示提示信息
    tooltip: {
      trigger: 'item'        // 触发类型为 'item'，即针对每个数据项
    },

    // 图例配置
    legend: {
      orient: 'horizontal',  // 图例方向为水平排列
      left: 'center',        // 图例水平居中
      bottom: '10%',         // 图例位于图表底部，距离底部10%
      // data: ['1万以下', '1-1.5万', '1.5-2万', '2万以上'] // 图例项的数据
    },

    // 系列列表，这里是定义一个环形图
    series: [
      {
        name: '薪资分布',     // 系列名称
        type: 'pie',          // 图表类型为饼图（环形图）
        radius: ['45%', '60%'], // 内外半径比例，确保每个扇区宽度一致
        center: ['50%', '50%'], // 确保环形图位于容器中心
        itemStyle: {
          borderRadius: 20,  // 设置扇区的圆角
          borderColor: '#fff',// 设置扇区的边框颜色为白色
          borderWidth: 3     // 设置扇区的边框宽度为3像素
        },

        // 隐藏扇区旁边的标签
        label: {
          show: false         // 不显示标签
        },

        // 隐藏连接标签和扇区的线条
        labelLine: {
          show: false         // 不显示标签线
        },
        data: data.map(item => {
          return {
            value: item.g_count + item.b_count,
            name: item.label
          }
        })
      }
    ]
  };

  myChart.setOption(option)
}
// 渲染柱状图
function renderBar(data) {
  const lines = document.querySelector("#lines")
  const myChart = echarts.init(lines)
  const option = {
    // 图表标题配置
    // title: {
    //   text: 'World Population', // 主标题文本
    //   left: 'center' // 标题居中显示
    // },

    // 提示框配置
    tooltip: {
      trigger: 'axis', // 提示框的触发方式为坐标轴触发
      axisPointer: {
        type: 'shadow' // 使用阴影样式指示器
      }
    },

    // 图例配置
    // legend: {
    //   data: ['2011', '2012'], // 图例项数据
    //   top: 'bottom' // 图例位于图表底部
    // },

    // 网格配置
    grid: {
      left: '3%', // 网格距离左侧的距离
      right: '4%', // 网格距离右侧的距离
      bottom: '3%', // 网格距离底部的距离
      top: "5%",
      containLabel: true // 网格是否包含标签
    },

    // Y 轴配置
    yAxis: {
      type: 'value', // Y 轴类型为数值轴
      boundaryGap: [0, 0.01] // 设置 Y 轴的边界间隙
    },

    // X 轴配置
    xAxis: {
      type: 'category', // X 轴类型为类目轴
      data: data[1].map(item => item.name) // X 轴类目数据，来自 data[1] 的 name 字段
    },

    // 系列配置
    series: [
      {
        name: '2011', // 系列名称
        type: 'bar', // 图表类型为柱状图
        data: data[1].map(item => item.hope_salary), // 数据来源，来自 data[1] 的 hope_salary 字段
        itemStyle: {
          color: {
            type: 'linear', // 渐变类型为线性渐变
            x: 0, // 渐变起点的 x 坐标
            y: 0, // 渐变起点的 y 坐标
            x2: 0, // 渐变终点的 x 坐标
            y2: 1, // 渐变终点的 y 坐标
            colorStops: [ // 渐变颜色停止点
              {
                offset: 0, // 渐变起始位置（顶部）
                color: 'rgba(75, 192, 192, 1)' // 顶部颜色（不透明）
              },
              {
                offset: 1, // 渐变结束位置（底部）
                color: 'rgba(75, 192, 192, 0)' // 底部颜色（完全透明）
              }
            ],
            global: false // 是否全局渐变，默认为 false
          }
        }
      },
      {
        name: '2012', // 系列名称
        type: 'bar', // 图表类型为柱状图
        data: data[1].map(item => item.salary), // 数据来源，来自 data[1] 的 salary 字段
        itemStyle: {
          color: {
            type: 'linear', // 渐变类型为线性渐变
            x: 0, // 渐变起点的 x 坐标
            y: 0, // 渐变起点的 y 坐标
            x2: 0, // 渐变终点的 x 坐标
            y2: 1, // 渐变终点的 y 坐标
            colorStops: [ // 渐变颜色停止点
              {
                offset: 0, // 渐变起始位置（顶部）
                color: 'rgba(54, 162, 235, 1)' // 顶部颜色（不透明）
              },
              {
                offset: 1, // 渐变结束位置（底部）
                color: 'rgba(54, 162, 235, 0)' // 底部颜色（完全透明）
              }
            ],
            global: false // 是否全局渐变，默认为 false
          }
        }
      }
    ]
  };
  myChart.setOption(option)

  document.querySelector("#btns").addEventListener("click", function (e) {
    if (e.target.tagName === "BUTTON") {
      // 点击高亮
      document.querySelector(".btn-blue").classList.remove("btn-blue")
      e.target.classList.add("btn-blue")
      // 数据更新
      option.xAxis.data = data[e.target.innerHTML].map(item => item.name)
      option.series[0].data = data[e.target.innerHTML].map(item => item.hope_salary)
      option.series[1].data = data[e.target.innerHTML].map(item => item.salary)

      myChart.setOption(option)


    }

  })

}
// 渲染双饼图
function renderPies(data) {
  const gender = document.querySelector("#gender")
  const myChart = echarts.init(gender)
  // 数据源
  const datas = [
    [
      { name: '1万以下', value: 5.6 },
      { name: '1-1.5万', value: 1 },
      { name: '1.5-2万', value: 0.8 },
      { name: '2万以上', value: 0.5 },
      { name: '其它', value: 3.8 }
    ],
    [
      { name: '1万以下', value: 3.8 },
      { name: '1-1.5万', value: 2.3 },
      { name: '1.5-2万', value: 2.2 },
      { name: '2万以上', value: 1.3 },
      { name: '其它', value: 5.7 }
    ]
  ];

  // 只保留每个环形图的前4个数据项
  const limitedDatas = datas.map(data => data.slice(0, 4));

  // ECharts 配置选项
  const option = {
    // 图表标题配置
    title: {
      text: '男女薪资分布',
      left: 15,
      top: 15,
      textStyle: {
        color: 'rgb(70, 70, 70)',
        fontWeight: 600,
        fontSize: 16
      }
    },

    // 系列配置
    series: limitedDatas.map(function (data, idx) {
      return {
        name: idx === 0 ? '男生' : '女生', // 设置系列名称
        type: 'pie', // 图表类型为饼图
        radius: [35, 55], // 内外半径比例
        center: ['50%', idx === 0 ? '35%' : '75%'], // 调整两个环形图的垂直位置

        label: {
          show: true, // 显示标签
          position: 'outside', // 标签位置在扇区外部
          distance: 20, // 标签距离

        },
        labelLine: {
          length: 15, // 标签线长度
          length2: 0, // 标签线结束长度
          maxSurfaceAngle: 80 // 最大表面角度
        },
        data: data // 数据项
      };

    }),
    graphic: [
      {
        type: 'text',
        left: 'center',
        top: '50%',
        style: {
          text: '男生',
          fontSize: 12,
          color: 'rgb(70, 70, 70)',
        }
      },
      {
        type: 'text',
        left: 'center',
        top: '90%',
        style: {
          text: '女生',
          fontSize: 12,
          color: 'rgb(70, 70, 70)',
        }
      }
    ]
  };

  myChart.setOption(option)
}
// 渲染地图
function rendermap(data) {
  const map = document.querySelector("#map")
  const myChart = echarts.init(map)
  const option = {
    visualMap: {
      min: 0,
      max: 1000,
      left: 'left',
      top: 'bottom',
      text: ['高', '低'],
      calculable: false,
      orient: 'horizontal',
      inRange: {
        color: ['#e0ffff', '#006edd'],
        symbolSize: [30, 100]
      }
    },
    tooltip: {
      padding: 8,
      enterable: true,
      transitionDuration: 1,
      textStyle: {
        color: '#fff',
        decoration: 'none',
      }
    },
    series: [{
      name: '接入医院数量',
      type: 'map',
      mapType: 'china',
      itemStyle: {
        normal: {
          label: {
            show: false
          }
        },
        emphasis: {
          label: {
            show: true
          }
        }
      },
      label: {
        normal: { //静态的时候展示样式
          show: true, //是否显示地图省份得名称
          textStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        emphasis: { //动态展示的样式
          color: '#fff',
        },
      },
      data: [{
        name: '北京',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
      },
      {
        name: '天津',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
      },
      {
        name: '上海',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
      },
      {
        name: '重庆',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
      },
      {
        name: '河北',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
      },
      {
        name: '河南',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
      },
      {
        name: '云南',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
      },
      {
        name: '辽宁',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
      },
      {
        name: '黑龙江',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
      },
      {
        name: '湖南',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
      },
      {
        name: '安徽',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
      },
      {
        name: '山东',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
      },
      {
        name: '新疆',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
      },
      {
        name: '江苏',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
      },
      {
        name: '浙江',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
      },
      {
        name: '江西',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
      },
      {
        name: '湖北',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
      },
      {
        name: '广西',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
      },
      {
        name: '甘肃',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
      },
      {
        name: '山西',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
      },
      {
        name: '内蒙古',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
      },
      {
        name: '陕西',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
      },
      {
        name: '吉林',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
      },
      {
        name: '福建',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
      },
      {
        name: '贵州',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
      },
      {
        name: '广东',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
      },
      {
        name: '青海',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
      },
      {
        name: '西藏',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
      },
      {
        name: '四川',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
      },
      {
        name: '宁夏',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
      },
      {
        name: '海南',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
      },
      {
        name: '台湾',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
      },
      {
        name: '香港',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
      },
      {
        name: '澳门',
        value: Math.round(Math.random() * 1000),
        tipData: [Math.round(Math.random() * 1000), Math.round(Math.random() * 1000)]
      },
      ]
    },]
  }
  myChart.setOption(option)
}

